<script setup lang="ts">
import { onMounted, onUpdated, ref } from "vue";
const emit = defineEmits<{
  (e: "filterByPrice"): void;
  (e: "filterByName"): void;
  (e: "filterByStock", inStock: null | boolean): void;
}>();

const onChangeSelect = (e: Event) => {
  const value = (e.target as HTMLSelectElement).value;
  let inStock = null;
  if (value) {
    inStock = value === "true";
  }
  emit("filterByStock", inStock);
};

const select = ref<HTMLSelectElement | null>(null);

onMounted(() => {
  console.log(select.value?.selectedIndex);
});
onUpdated(() => {
  console.log(select.value?.selectedIndex);
});
</script>
<template>
  <div class="actions">
    <button @click="emit('filterByPrice')">按照价格排序</button>
    <button @click="emit('filterByName')">按照名称排序</button>
    <select @change="onChangeSelect" ref="select">
      <option value="">按照库存过滤</option>
      <option value="true">有货</option>
      <option value="false">无货</option>
    </select>
  </div>
</template>
<style scoped>
.actions {
  display: flex;
  gap: 24px;
}
</style>
